<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" charset="utf-8"/>
    <title>Statistics t-test Animation</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <!-- jQuery -->
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/crossfilter.js" type="text/javascript"></script>
    <script src="js/d3.v3.js" charset="utf-8" type="text/javascript"></script>
  </head>
  <body data-spy="scroll" data-target="#side-nav">

    <div id="top-navbar" class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#"><strong>Johnny takes on Stats</strong></a>
        <ul class="nav">
          <li class="divider-vertical"><a href="index.html">Say 'Hi!' to Johnny</a></li>
          <li class="divider-vertical"><a href="app.html">Take on the Stats</a></li>
        </ul>
      </div>
    </div>
    <div id="content">
      <div id="side-nav" class="span5" style="position:fixed"> <!-- id="left-content" -->
        <h1>Statistics t-test</h1>
        <ul class="nav nav-pills nav-stacked">
          <li><a tabindex="-1" href="#step1">Step 1: Research Questions & Hypotheses</a></li>
          <li><a tabindex="-1" href="#step2">Step 2: Edit Population</a></li>
          <li><a tabindex="-1" href="#step3">Step 3: Define Test</a></li>
          <li><a tabindex="-1" href="#step4">Step 4: View Results</a></li>
        </ul>
        
        <div id="suggestion-block">
          <p>Disucssion and Feedback</p>
          <div style="height:300px; overflow-y:scroll;">
            <div class="alert alert-info">
              <button type="button" class="close" data-dismiss="alert">&times;</button>
              <strong>Welcome!</strong> Today we will learn a bit about <a href="http://en.wikipedia.org/wiki/Student's_t-test">t-tests</a>
            </div>
          </div>
        </div>
      </div>
      <div id="right-content" class="span7">
        <ul>
          <li>
            <div class="hero-unit" id="step1">
              <h2>step 1. Research Question and Null-Hypothesis</h2>
              <form>
              <span class="label label-important">Research Question (RQ1): </span>
              <input id="sample_one" class="span2" type="text" placeholder="Sample 1" /> 
              <span class="label label-info">versus</span>
              <input id="sample_two" class="span2" type="text" placeholder="Sample 2" />
              <br />
              <span class="label label-important">Null Hypothesis (H0):</span>
              <input class="span2" type="text" placeholder="&mu; 1" /> 
              <span class="label label-info">equals</span>
              <input class="span2" type="text" placeholder="&mu; 2" />
              <br />
              <span class="label label-important">Alternate Hypothesis (Ha):  </span>
              <input class="span2" type="text" placeholder="&mu; 1" /> 
              <select id="alternative-options" class="span1">
                <option value="greater"> &gt; </option>
                <option value="lesser"> &lt; </option>
                <option value="notequals"> &#33;&#61; </option>
              </select>
              <input class="span2" type="text" placeholder="&mu; 2" /></form>
            </div>
          </li>
          <li>
            <div class="hero-unit" id="step2">
              <h2>step 2. Define Population</h2>
              <div class="sample">
                  <h4>Sample File 1 (Google Trend CSV File <a href="report(1).csv">example</a>)</h4>
                  <div class="drop_zone" id="drop_zone_one">Drop files here</div>
              </div>
                <small>Current Selection:</small>
                <small id="chart_one_selection_start">waiting for you</small>
                <small>to</small>
                <small id="chart_one_selection_end">drop some CSV files.</small>
                <br/>
                <small class="muted">(we assume that selecting nothing is selecting everything)</small>
              <div class="chart">
                <svg id="chart_one" width = "700" height = "150">
                  <g id="chart_one_barsholder"  transform="translate(40,25)">
                  </g>
                  <g class = "axis" id="x-axis-one" transform="translate(40, 105)">
                  </g>
                  <g class = "axis" id=y-axis-one transform="translate(40, 25)">
                  </g>
                </svg>
                
              </div>
              <div class="sample">
                <h4>Sample File 2 (Google Trend CSV File <a href="report(2).csv">example</a>)</h4>
                <div class="drop_zone" id="drop_zone_two">Drop files here</div>
              </div>
              
              <small>Current Selection:</small>
              <small id="chart_two_selection_start">waiting for you</small>
              <small>to</small>
              <small id="chart_two_selection_end">drop some CSV files.</small>
              <br/>
              <small class="muted">(we assume that selecting nothing is selecting everything)</small>
              <div class="chart">
                <svg id="chart_two" width = "700" height = "120">
                  <g id="chart_two_barsholder" transform="translate(40,25)">
                  </g>
                  <g class = "axis" id=x-axis-two transform="translate(40, 105)">
                  </g>
                  <g class = "axis" id=y-axis-two transform="translate(40, 25)">
                  </g>
                </svg>
                
              </div>
            </div>
          </li>
          <li>
            <div class="hero-unit" id="step3">
              <h2>step 3. Select the Test Input</h2>
                <div>
                <form name="input-set">
                    <span>Sampling Method: Serial</span>
                    <div>
                    <input id="df" type="text" placeholder="1">Degree of Freedom</input>
                    </div>
                    <div>
                        <input class="btn btn-primary" id="compute" type="button" value="Compute" onClick="run_test()"></input>
                    </div>
                </form>
                </div>
            </div>
          </li>
          <li>
            <div class="hero-unit" id="step4">
              <h2>step 4. Reap the Results</h2>
              <div id="result-set">
                  <p id="t-value">t-value</p>
                  <p id="mean">Mean</p>
                  <p id="standard_deviation">Standard Deviation</p>
                  <p id="effective_size">Effective size</p>
                  <p id="num_of_obs">Number of Observations</p>
                  <p id="significance_level">Significance Level (p-value)</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      
      <script src="js/file.js" type="text/javascript"></script>
      <script src="js/util.js" type="text/javascript"></script>
    </div>
  </body>
</html>
